<template>
    <div class="erp-image-wrap" v-loading="loading || tranlataLoading">
        <div class="erp-image-no-uploader">
            <el-upload :show-file-list="false" class="upload-text-wrap" :action="uploadJsonUrl" :data="otherData" :on-success="handlerSuccess" :before-upload="handlerBefore">
                <div>上传{{title}}</div>
            </el-upload>
            <div v-if="urlSrc">
                <el-tooltip class="item" effect="dark" :content="urlSrc" placement="top-start">
                    <span class="state-success">预览</span>
                </el-tooltip>
                <span class="state-error" style="margin-left:10px" @click="downLoad">下载</span>
            </div>
            <div v-else class="state-error">未上传</div>
        </div>
    </div>
</template>
<script>
import api from "@/api/api"
import Constants from "@/utils/constants"
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'

export default {
    name: 'CErpImage',
    data() {
        return {
            tranlataLoading: false,
            loading: false,
            noData: true,
            otherData: {
                dir: "tp",
                type: "1",
                token: localStorage.getItem('token')
            },
            uploadJsonUrl: api.uploadJsonUrl,
            urlSrc: this.value
        }
    },
    components: {


    },
    props: {
        value: {
            type: String,
            default: ""

        },

        type: {
            type: String,
            default: "1"

        },
        customerCode: {
            type: String,
            default: ""

        },
        customerId: {
            type: Number,
            default: "1"

        },
        title: {
            type: String,
            default: ""
        }
    },
    mounted: function() {

        if (this.value) {
            this.noData = false;
            this.urlSrc = this.value;
        } else {
            this.noData = true;
        }

    },
    create: function() {

    },
    watch: {
        "value": {
            handler(newval, olderval) {

                if (newval) {
                    this.noData = false;
                    this.urlSrc = newval;
                } else {
                    this.noData = true;
                }
            }
        }
    },
    methods: {
        downLoad: function() {
            let root=localStorage.getItem("rootBtw");
            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/xiapi/downFile.action?";
            let params = { path:this.urlSrc,root:root+"/"+this.customerCode+"/" };
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));
        },
        remove: function() {
            this.noData = true;
            this.$emit("input", "");
        },
        handlerBefore: function(file) {

            this.otherData.type = this.type;
            this.otherData.customerId = this.customerId;
            this.showLoading();
            return true;
        },

        handlerSuccess: function(response, file, fileList) {
            this.hideLoading();
            if (response.status == 0) {

                this.urlSrc=response.obj;
                setTimeout(() => {
                    this.$emit("input", response.obj);
                }, 1000);

            } else {
                this.errorMessage(response.info);
            }

        }
    }
}
</script>
<style>
.erp-image-no-uploader {
    min-height: 50px;
    width: 120px;
    height: auto;
    margin-bottom: 10px;
    vertical-align: top;
    border: 1px dashed #e6e6e6;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0px 10px;
}

.erp-image-no-uploader .upload-text-wrap {
    font-size: 14px;
    line-height: 40px;

}

.erp-image-wrap {
    position: relative;

    margin-left: 20px;
}

.erp-image-wrap:first-child {
    margin-left: 0px;
}

.erp-image-wrap+.erp-image-wrap {}

.erp-image {
    width: 120px;
    height: 120px;
    border: 1px dashed #e2e2e2;
    box-sizing: border-box;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.erp-image-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 1px;
    right: 1px;
    position: absolute;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;

}

.erp-image-wrap:hover .erp-image-title {}

.erp-image-wrap:hover .erp-image-editor-wrap {}

.erp-image-editor-wrap {
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 118px;
    height: 20px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 4px;
    opacity: 1;
}

.erp-image-wrap .guanbi {
    position: absolute;
    top: -5px;
    left: 10px;

}

.erp-image-editor-wrap:hover {
    opacity: 1
}

.erp-image-editor-wrap .editor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 118px;
    height: 30px;
    position: absolute;
    bottom: 0;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    border-top: 1px dashed #e2e2e2;
}

.erp-image-editor-wrap .editor i {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;

    cursor: pointer;

    font-size: 14px;
    fill: #b3b3b3;

}
</style>